<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link rel="icon" type="image/x-icon" href="http://www.hydrotransformer.cn/logo_mini.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HRHE瀚锐氢能</title>
  </head>
  <body>
    <div id="app">
      <style>
        #load {
          position: fixed;
          width: 100%;
          height: 100%;
          z-index: 999999999999999999999999;
          background-size: cover;
          background-color: #fff;
          top: 0;
        }
        #load .load-main {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        }
        #load .load-main .load-icon {
          display: block;
          width: 300px;
          height: 100px;
          margin-bottom: 30px;
        }
        #load .load-animate {
          position: relative;
          height: 34px;
          width: 34px;
          margin: 0 auto;
        }
        #load .load-animate-el {
          width: 10px;
          height: 10px;
          background-color: #004ea1;
          margin-right: 14px;
          float: left;
          margin-bottom: 14px;
        }
        #load .load-animate-el:nth-child(2n + 0) {
          margin-right: 0;
        }
        #load #object_one {
          animation: object_one 2s infinite;
        }
        #load #object_two {
          animation: object_two 2s infinite;
        }
        #load #object_three {
          animation: object_three 2s infinite;
        }
        #load #object_four {
          animation: object_four 2s infinite;
        }

        @keyframes object_one {
          25% {
            transform: translate(25.5px, 0) rotate(-90deg) scale(0.5);
          }
          50% {
            transform: translate(25.5px, 25.5px) rotate(-180deg);
          }
          75% {
            transform: translate(0, 25.5px) rotate(-270deg) scale(0.5);
          }
          100% {
            transform: rotate(-360deg);
          }
        }

        @keyframes object_two {
          25% {
            transform: translate(0, 25.5px) rotate(-90deg) scale(0.5);
          }
          50% {
            transform: translate(-25.5px, 25.5px) rotate(-180deg);
          }
          75% {
            transform: translate(-25.5px, 0) rotate(-270deg) scale(0.5);
          }
          100% {
            transform: rotate(-360deg);
          }
        }

        @keyframes object_three {
          25% {
            transform: translate(0, -25.5px) rotate(-90deg) scale(0.5);
          }
          50% {
            transform: translate(25.5px, -25.5px) rotate(-180deg);
          }
          75% {
            transform: translate(25.5px, 0) rotate(-270deg) scale(0.5);
          }
          100% {
            transform: rotate(-360deg);
          }
        }

        @keyframes object_four {
          25% {
            transform: translate(-25.5px, 0) rotate(-90deg) scale(0.5);
          }
          50% {
            transform: translate(-25.5px, -25.5px) rotate(-180deg);
          }
          75% {
            transform: translate(0, -25.5px) rotate(-270deg) scale(0.5);
          }
          100% {
            transform: rotate(-360deg);
          }
        }
      </style>

      <div id="load">
        <div class="load-main">
          <img class="load-icon" src="/src/assets/images/logo_small.png" />
          <div class="load-animate">
            <div class="load-animate-el" id="object_one"></div>
            <div class="load-animate-el" id="object_two"></div>
            <div class="load-animate-el" id="object_three"></div>
            <div class="load-animate-el" id="object_four"></div>
          </div>
        </div>
      </div>
    </div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
